<template>
  <view>
    <uni-card @click="popupShow = true">
      <template v-slot:title>
        <view class="icons-text card-title">
          <text class="icons">
            <image mode="aspectFill" class="image" src="@/static/icons/video.png"></image>
          </text>
          <text class="text">线下会议</text>
        </view>
      </template>
      <view class="card-body">
        <text>{{ item?.abstractText }}</text>
        <view class="icons-text">
          <text class="icons">
            <image mode="aspectFill" class="image" src="@/static/icons/todo.png"></image>
          </text>
          <text class="text">{{
            item?.targetObject?.startTime + ' 至 ' + item?.targetObject?.endTime
          }}</text>
        </view>
        <view class="icons-text">
          <text class="icons">
            <text>
              <u-icon name="map-fill" color="#3775cb" size="14"></u-icon>
            </text>
          </text>
          <text class="text">{{ item?.targetObject?.location }}</text>
        </view>
        <view
          style="margin-bottom: 20rpx"
          class="icons-text"
          v-for="(cus, i) in item?.targetObject?.meetingParticipantVoList"
          :key="i"
        >
          <text v-if="cus?.participantType === '1'">
            <text class="icons">
              <image
                mode="aspectFill"
                class="image"
                :src="
                  cus?.participantObject?.avatarUrl
                    ? cus?.participantObject?.avatarUrl
                    : '/static/icons/avatar.png'
                "
              ></image>
            </text>
            <text class="text">{{ cus?.participantObject?.name }}</text>
            <text class="icons">
              <image mode="aspectFill" class="image" src="@/static/icons/customer.png"></image>
            </text>
          </text>
          <text v-if="cus?.participantType === '10'">
            <text class="icons">
              <image
                mode="aspectFill"
                class="image"
                :src="
                  cus?.participantObject?.avatarUrl
                    ? cus?.participantObject?.avatarUrl
                    : '/static/icons/avatar.png'
                "
              ></image>
            </text>
            <text style="color: #35496b" class="text">{{ cus?.participantObject?.nickName }}</text>
            <text class="icons">
              <image mode="aspectFill" class="image" src="@/static/icons/user.png"></image>
            </text>
          </text>
        </view>
      </view>
    </uni-card>
    <u-popup :show="popupShow" :round="10" @close="popupShow = false">
      <view style="max-height: 60vh; overflow: auto; margin-top: 20rpx">
        <view class="list">
          <uni-list>
            <uni-list :border="true">
              <uni-list-chat
                v-for="(cus, index) in item?.targetObject?.meetingParticipantVoList"
                :key="index"
                :title="
                  cus?.participantType === '1'
                    ? cus?.participantObject?.name
                    : cus?.participantObject?.nickName
                "
                :avatar="
                  cus?.participantObject?.avatarUrl
                    ? cus?.participantObject?.avatarUrl
                    : '/static/icons/avatar.png'
                "
                :note="item?.abstractText"
                badge-positon="left"
              >
                <view class="chat-custom-right">
                  <view @click="clickUserProfile(cus)" style="margin-top: 14rpx">
                    <image
                      style="width: 50rpx"
                      class="slot-image"
                      :src="
                        cus?.participantObject?.type === '1'
                          ? '/static/icons/WeChat.png'
                          : '/static/icons/wecom.png'
                      "
                      mode="widthFix"
                    ></image>
                  </view>
                </view>
              </uni-list-chat>
            </uni-list>
          </uni-list>
        </view>
      </view>
    </u-popup>
  </view>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import * as ww from '@wecom/jssdk'
import { createJsapiSignatureAPI } from '@/services/common'
import { OpenUserProfileType } from '@wecom/jssdk'
import { registerApi } from '@/utils/wecom'
import { onShow } from '@dcloudio/uni-app'

const props = defineProps({
  item: {
    type: Object as any,
    default: () => {},
  },
})
const popupShow = ref<boolean>(false)

const clickUserProfile = (row: any) => {
  if (row?.participantType === '1') {
    ww.openUserProfile({
      type: OpenUserProfileType.external,
      userid: row?.participantObject?.qwExternalUserid,
    })
  } else {
    ww.openUserProfile({
      type: OpenUserProfileType.internal,
      userid: row?.participantObject?.userName,
    })
  }
}

onShow(async () => {
  await registerApi(['openUserProfile'])
})
</script>

<style lang="scss" scoped>
page {
  background-color: #f7f7f7;
  height: 100%;
}
.icons-text {
  display: flex;
  align-items: center;
  line-height: 1;
  margin-top: 10rpx;
  color: #666;

  .icons {
    color: #3775cb;
    padding: 6rpx 5rpx 7rpx 0;
    .image {
      width: 26rpx;
      height: 26rpx;
    }
  }
}
.card-title {
  font-size: 28rpx;
}
.card-body {
  padding-left: 18rpx;
}
</style>
